<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="select_box u-f u-f-ac u-f-jsb" style="width: 258px">
        <p class="label font14 text_black">{{ $t("客户端") }}：</p>
        <el-select
          v-model="clientVal"
          :placeholder="$t('请选择')"
          @change="clientChange"
        >
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="select_box u-f u-f-ac u-f-jsb" style="width: 264px">
        <p class="label font14 text_black">{{ $t("年份") }}：</p>
        <el-date-picker
          value-format="yyyy"
          v-model="forms.year"
          type="year"
          placeholder="选择年"
        >
        </el-date-picker>
      </div>

      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("单号类型") }}：</p>
        <el-select
          v-model="forms.type"
          :placeholder="$t('请选择')"
          @change="typeChange"
        >
          <el-option
            v-for="item in orderType[clientVal]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("订单号") }}：</p>
        <el-input
          v-model="forms.text"
          :placeholder="$t('请输入订单号')"
        ></el-input>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData()">
        {{ $t("提交") }}
      </button>
    </div>

    <div class="head_content">
      <div
        class="head_content_item"
        v-if="
          JSON.stringify(getDataArr.user) != '{}' && getDataArr.user != null
        "
      >
        <div class="content_item_title">用户</div>
        <div class="content_item_content">
          会员号：{{ getDataArr.user.member_id }}
        </div>
        <div class="content_item_content">
          订单数量：{{ getDataArr.user.order_num }}
        </div>
        <div class="content_item_content">
          最后下单时间：{{ getDataArr.user.last_order }}
        </div>
        <div class="content_item_content">
          余额：{{ getDataArr.user.balance }}
        </div>
        <div class="content_item_content">
          押金：{{ getDataArr.user.deposit }}
        </div>
        <div class="content_item_content">名称：{{ getDataArr.user.nick }}</div>
        <div class="content_item_content">类型：{{ getDataArr.user.type }}</div>
      </div>
      <div
        class="head_content_item"
        v-if="
          JSON.stringify(getDataArr.order_log) != '{}' &&
          getDataArr.order_log != null
        "
      >
        <div class="content_item_title">订单</div>
        <div class="content_item_content">
          订单号：{{ getDataArr.order_log.order_no }}
        </div>
        <div class="content_item_content">
          用户类型：{{ getDataArr.order_log.user_type }}
        </div>
        <div class="content_item_content">
          用户昵称：{{ getDataArr.order_log.nick }}
        </div>
        <div class="content_item_content">
          订单类型：{{
            getDataArr.order_log.order_type == 1 ? "充氧宝" : "密码线"
          }}
        </div>
        <div class="content_item_content">
          设备号：{{ getDataArr.order_log.device_id }}
        </div>
        <div class="content_item_content">
          充氧宝编号：{{ getDataArr.order_log.battery_id }}
        </div>
        <div class="content_item_content">
          免费时长：{{ getDataArr.order_log.free_time }}
        </div>
        <div class="content_item_content">
          收费标准：{{ getDataArr.order_log.billing }}
        </div>
        <div class="content_item_content">
          每天封顶：{{ getDataArr.order_log.ceiling }}
        </div>
        <div class="content_item_content">
          押金：{{ getDataArr.order_log.deposit }}
          <span
            class="txt font14 text_blue"
            style="margin-left: 10px"
            v-if="getDataArr.order_log.pay_auth_id > 0"
            >{{ $t("免押租借") }}</span
          >
        </div>
        <div class="content_item_content">
          下单时间：{{ getDataArr.order_log.start_time }}
        </div>
        <div class="content_item_content">
          使用时间：{{ getDataArr.order_log.use_time }}
        </div>
        <div class="content_item_content">
          归还商家：{{ getDataArr.order_log.return_seller }}
        </div>
        <div class="content_item_content">
          归还时间：{{ getDataArr.order_log.return_time }}
        </div>
        <div
          class="content_item_content"
          v-for="(item, index) in getDataArr.order_log.brokerage"
          :key="index"
        >
          {{ item.type }}：{{ item.name }} -- {{ item.ratio }}%分成
        </div>
        <div class="content_item_content text_danger">
          订单金额：￥{{ getDataArr.order_log.amount }}
        </div>
        <div class="content_item_content text_danger">
          订单状态：{{ getDataArr.order_log.status_text }}
        </div>
      </div>
      <div
        class="head_content_item"
        v-if="
          JSON.stringify(getDataArr.auth_log) != '{}' &&
          getDataArr.auth_log != null
        "
      >
        <div class="content_item_title">授权</div>
        <div class="content_item_content">
          {{
            getDataArr.auth_log.pay_type == 1
              ? "微信商户单号"
              : "支付宝约定详情订单号"
          }}：{{ getDataArr.auth_log.order_no }}
        </div>
        <div class="content_item_content">
          {{
            getDataArr.auth_log.pay_type == 1 ? "微信服务单号" : "支付宝授权号"
          }}：{{ getDataArr.auth_log.trade_no }}
        </div>
        <div class="content_item_content">
          {{
            getDataArr.auth_log.pay_type == 1 ? "微信订单号" : "支付宝订单号"
          }}：{{ getDataArr.auth_log.operation_id }}
        </div>
        <div class="content_item_content">
          {{
            getDataArr.auth_log.pay_type == 1
              ? "微信商家订单号"
              : "支付宝商家订单号"
          }}：{{ getDataArr.auth_log.request_no }}
        </div>
        <div class="content_item_content">
          授权金额：{{ getDataArr.auth_log.amount }}
        </div>
        <div class="content_item_content">
          状态：{{ getDataArr.auth_log.status }}
        </div>
      </div>
      <div
        class="head_content_item"
        v-if="
          JSON.stringify(getDataArr.recharge_log) != '{}' &&
          getDataArr.recharge_log != null
        "
      >
        <div class="content_item_title">充值</div>
        <div class="content_item_content">
          {{
            getDataArr.recharge_log.pay_type == 1
              ? "微信充值商家单号"
              : "支付宝充值商家单号"
          }}：{{ getDataArr.recharge_log.order_no }}
        </div>
        <div class="content_item_content">
          {{
            getDataArr.recharge_log.pay_type == 1
              ? "微信交易单号"
              : "支付宝充值订单号"
          }}：{{ getDataArr.recharge_log.trade_no }}
        </div>
        <div class="content_item_content">
          金额：{{ getDataArr.recharge_log.amount }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
var that;
export default {
  name: "order-searchList",
  data() {
    let that = this;
    return {
      clientArr: [
        {
          value: 0,
          label: that.$t("微信小程序"),
        },
        {
          value: 1,
          label: that.$t("支付宝小程序"),
        },
      ],
      clientVal: 0,

      orderType: [
        [
          {
            value: "order_no",
            label: that.$t("充氧宝订单号"),
          },
          {
            value: "trade_no",
            label: that.$t("交易单号"),
          },
          {
            value: "auth_no",
            label: that.$t("服务单号"),
          },
          {
            value: "auth_order_no",
            label: that.$t("商户单号"),
          },
        ],
        [
          {
            value: "order_no",
            label: that.$t("充氧宝订单号"),
          },
          {
            value: "recharge_order_no",
            label: that.$t("充值商家单号"),
          },
          {
            value: "recharge_trade_no",
            label: that.$t("充值订单号"),
          },
          {
            value: "auth_no",
            label: that.$t("芝麻信用授权号"),
          },
          {
            value: "operation_id",
            label: that.$t("芝麻信用订单号"),
          },
          {
            value: "request_no",
            label: that.$t("芝麻信用商家订单号"),
          },
          {
            value: "auth_order_no",
            label: that.$t("约定详情订单号"),
          },
        ],
      ],
      forms: {
        year: String(new Date().getFullYear()),
        type: "",
        text: "",
      },
      getDataArr: [],
    };
  },
  mounted() {
    that = this;
    //获取本地存储
    let newForms = localStorage.getItem("forms");
    if (newForms) {
      // console.log(JSON.parse(newForms));
      util.$http("/order/search", JSON.parse(newForms)).then((res) => {
        if (res.code == 1) {
          this.forms = JSON.parse(newForms);
          that.getDataArr = res.data;
        }
      });
    }
  },
  methods: {
    clientChange(val) {
      that.forms.type = "order_no";
      that.clientVal = val;
    },
    typeChange(val) {
      that.orderTypeVal = val;
    },
    getData() {
      util
        .$http("/order/search", {
          year: that.forms.year,
          type: that.forms.type,
          text: that.forms.text,
        })
        .then((res) => {
          if (res.code == 1) {
            that.getDataArr = res.data;
          }
        });
      let forms = this.forms;
      localStorage.setItem("forms", JSON.stringify(forms));
    },
  },
};
</script>

<style lang="scss" scoped>
.head_search {
  margin-bottom: 20px;
}

.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}

.head_search .ipt_box .el-input {
  width: 200px;
}

.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}

.head_search .select_box .el-select {
  width: 200px;
}

.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}

.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}

.head_search .div_box .content:active {
  border-color: #409eff;
}

.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}

.head_search .date_box {
  width: 520px;
  margin-right: 20px;
}

.head_search .date_box .tip {
  width: 150px;
  margin: 0 0 0 10px;
}

.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}

.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}

.head_content {
  display: flex;

  // justify-content: space-between;
  .head_content_item {
    width: 20%;
    margin-right: 5%;
    overflow: hidden;

    .content_item_title {
      font-size: 17px;
      color: #303133;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .content_item_content {
      margin-top: 10px;
    }
  }

  .head_content_item:last-child {
    margin-right: 0;
  }
}
</style>